<template>
  <div class="tag-words-container">
    <div class="left-tab">
      <div
        v-for="(tab, index) in allWords"
        :key="tab.name"
        :class="activeIndex === index ? 'tab-name active' : 'tab-name'"
        @click="() => onChangeTab(index)"
      >
        {{ tab.name }}
      </div>
    </div>
    <div class="right-content" @scroll="onScroll">
      <div v-for="(tab, index) in allWords" :key="tab.name" class="tag-list-container">
        <p :ref="'tagItemName' + index" class="tab-name">{{ tab.name }}</p>
        <div class="tag-list-item">
          <el-check-tag
            v-for="tag in allWords[index].list"
            :key="tag.chinese"
            :checked="selectWords.map(item => item.chinese).includes(tag.chinese)"
            type="info"
            @change="() => onChange(tag)"
            >{{ tag.chinese }}</el-check-tag
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import allWords from '@/constants/words'
export default defineComponent({
  emits: ['change'],
  data() {
    return {
      allWords,
      selectWords: [],
      tabItemOffsetTop: [],
      activeIndex: 0,
      noScroll: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.getAllTabOffsetTop()
      }, 500)
    })
  },
  methods: {
    onChangeTab(index) {
      this.activeIndex = index
      this.$refs[`tagItemName${index}`][0].scrollIntoView()
      this.noScroll = true
      setTimeout(() => {
        this.noScroll = false
      }, 100)
    },
    onChange(tag) {
      // 判断selectWords里是否有这个词，有就删除，没有就添加
      const index = this.selectWords.findIndex((item) => item.chinese === tag.chinese)
      if (index > -1) {
        this.selectWords.splice(index, 1)
      } else {
        this.selectWords.push(tag)
      }
      this.$emit('change', this.selectWords)
    },
    getAllTabOffsetTop() {
      const tabItemOffsetTop = []
      allWords.forEach((_, index) => {
        const tabItem = this.$refs[`tagItemName${index}`][0]
        tabItemOffsetTop.push(tabItem.offsetTop)
        this.tabItemOffsetTop = tabItemOffsetTop
      })
      this.tabItemOffsetTop = tabItemOffsetTop
    },
    onScroll(e) {
      if (this.noScroll) return
      const index = this.tabItemOffsetTop.findIndex((item) => item + 40 > e.target.scrollTop)
      this.activeIndex = index
    },
  },
})
</script>
<style lang="less">
.tag-words-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  .left-tab {
    width: 100px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
    .tab-name {
      font-size: 16px;
      margin-bottom: 20px;
      cursor: pointer;
      &.active {
        color: var(--el-color-primary);
        border-left: 2px solid var(--el-color-primary);
        padding-left: 10px;
      }
    }
  }
  .right-content {
    flex: 1;
    background-color: #fff;
    overflow-y: auto;
    .tab-name {
      padding: 8px;
      color: #333;
      font-size: 14px;
      line-height: 18px;
      font-weight: 600;
    }
    .tag-list-container {
      padding: 10px;
      .tag-list-item {
        display: flex;
        flex-wrap: wrap;
        .el-check-tag {
          margin: 8px;
          border-radius: 4px;
          border: 1px solid var(--02-line-d-9-d-9-d-9, #d9d9d9);
          background: #fff;
          color: var(--02-text-85262626, rgba(0, 0, 0, 0.85));
          font-size: 14px;
          font-weight: 400;
          line-height: 18px;
          padding: 6px 24px;
          box-sizing: border-box;
          &.is-checked {
            border-radius: 4px;
            border: 1px solid var(--00-hcm-3366-ff, #36f);
            background: var(--hcmcrmlaeff-3-ff, #eff3ff);
          }
        }
      }
    }
  }
}
</style>
